<script setup>
import { ref, computed } from "vue";	
import { oneClickLoginApi } from '@/apis';
import { encryptLong } from '@/utils/rsa.js';
import { throttle } from "@/utils/tools";

const isSelectArg = ref(false)
const getArgImg = computed(()=>{
	return isSelectArg.value ? '/static/login/select.png' : '/static/login/unselected.png'
})

const getPhoneNumber = throttle(() =>{
	uni.login({
		provider: 'weixin',
		success: function ({code}) {
			login(code)
		}
	});
}, 1500) 

const login = async (code) =>{
	uni.removeStorageSync('key')
	uni.removeStorageSync('token')
	const { obj } = await oneClickLoginApi({code, source: 2})
	const { token, id} = obj
	let connectStr = `userId=${id}&token=${token}&time=${new Date().getTime()}`
	const cryptStr = encryptLong(connectStr)
	uni.setStorageSync('key', cryptStr)
	uni.setStorageSync('token', token)
	uni.setStorageSync('userId', `${id}`)
	uni.reLaunch({
		url:"/pages/index/index"
	})
}
const tipSelectedArg = () =>{
	uni.showToast({
		title: '请勾选协议哦~',
		icon: 'none'
	})
}
const navToWebView = (url) =>{
	const data = { url }
	uni.navigateTo({
		url:'/pages/web-view/index?data=' + encodeURIComponent(JSON.stringify(data))
	})
}
</script>

<template>
    <div class="container">
        <image class="logo" src="/static/login/logo.png"/>
        <template>
            <button
                v-if="isSelectArg"  
                class="btn" 
                @click="getPhoneNumber"
            >
                一键登录
            </button>
            <button v-else @click="tipSelectedArg" class="btn">一键登录</button>
        </template>
        <view class="agreement">
            <image @click="isSelectArg = !isSelectArg" :src="getArgImg" />
            <view>
                <text>点击登录或完成账号注册即代表您已阅读并同意</text>
                <text>《英语点读小助手使用协议与版本声明》</text>
                <text>《英语点读小助手隐私保护指引》</text>
            </view>
        </view>
    </div>
</template>

<style lang="scss">
.container{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.logo{
    width: 300rpx;
    height: 300rpx;
    display: block;
    margin: 20rpx auto 0 auto;
}	
.btn{
	width: 500rpx;
	font-weight: 600;
	border-radius: 20rpx;
	border: none;
	margin-top: 40rpx;
    background: linear-gradient( 315deg, rgba(78,197,132,0.6) 0%, #4ec584 100%);
    color: #FFFF;
}
.agreement{
    width: 645rpx;
    height: 49rpx;
    display: flex;
    align-items: center;
    margin: 40rpx auto 0 auto;
        image{
            width: 40rpx;
            height: 40rpx;
            flex-shrink: 0;
            margin-right: 14rpx;
        }
        text{
            width: 559rpx;
            font-size: 20rpx;
            line-height: 20rpx;
            font-weight: 400;
            color: #646464;
            line-height: 30rpx;
            font-family: Source Han Sans CN;
        }
}
</style>